<template>
  <div class="container">
    <!-- 头部保持不变 -->
    <header>
      <div class="header-content">
        <div class="logo">
          <h1><i class="fas fa-calendar-alt"></i> 教学任务</h1>
        </div>
      </div>
    </header>

    <!-- 控制面板保持不变 -->
    <div class="control-panel">
      <div class="selector">
        <label for="semester">选择学期:</label>
        <select id="semester" v-model="selectedSemester">
          <option v-for="semester in semesterOptions" :key="semester.value" :value="semester.value">
            {{ semester.label }}
          </option>
        </select>
      </div>

      <div class="current-info">
        <i class="fas fa-info-circle"></i> 当前: {{ currentSemesterText }}
      </div>
    </div>

    <!-- 错误信息显示 -->
    <div v-if="errorMessage" class="error-message">
      <i class="fas fa-exclamation-triangle"></i>
      {{ errorMessage }}
      <button @click="fetchCourses" class="reload-btn">
        <i class="fas fa-sync-alt"></i> 重新加载
      </button>
    </div>

    <!-- 调试信息 -->
    <div v-if="debugMode" class="debug-info">
      <h3>调试信息</h3>
      <div>
        <h4>API响应结构:</h4>
        <pre>{{ JSON.stringify(apiResponse, null, 2) }}</pre>
      </div>
      <div v-if="rawApiData">
        <h4>数据分析:</h4>
        <p><strong>数据类型:</strong> {{ typeof rawApiData }}</p>
        <p v-if="rawApiData && typeof rawApiData === 'object'"><strong>包含的键:</strong> {{ Object.keys(rawApiData).join(', ') }}</p>
        <p><strong>处理后的课程数量:</strong> {{ courses.length }}</p>
        <p><strong>当前选中周次:</strong> {{ selectedWeek }}</p>
      </div>
      <button @click="debugMode = false" class="debug-close-btn">隐藏调试信息</button>
    </div>

    <div class="timetable">
      <table>
        <thead>
        <tr>
          <th>时间/星期</th>
          <th v-for="(day, index) in days" :key="index">{{ day }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(time, index) in timeSlots" :key="index">
          <td class="time-column">{{ time.start }}<br>---<br>{{ time.end }}</td>

          <template v-for="dayIndex in 7" :key="dayIndex">
            <!-- 起始节渲染 -->
            <td
                v-if="getCourseAt(dayIndex, index+1)"
                :rowspan="getCourseAt(dayIndex, index+1).endLesson - getCourseAt(dayIndex, index+1).startLesson + 1"
                class="course-cell"
            >
              <div class="course-card"
                   :class="getCourseColorClass(getCourseAt(dayIndex, index+1))"
                   @click="showCourseDetail(getCourseAt(dayIndex, index+1))">
                <div class="course-name">{{ getCourseAt(dayIndex, index+1).courseName }}</div>
                <div class="course-details">
                  <span v-if="getCourseAt(dayIndex, index+1).classroomNameLoading">
                    <i class="fas fa-spinner fa-spin"></i> 加载中...
                  </span>
                  <span v-else>{{ getCourseAt(dayIndex, index+1).classroomName || '未知地点' }}</span>
                </div>
                <div class="course-details">
                  <span v-if="getCourseAt(dayIndex, index+1).teacherNameLoading">
                    <i class="fas fa-spinner fa-spin"></i> 加载中...
                  </span>
                  <span v-else>{{ getCourseAt(dayIndex, index+1).teacherName || '未知教师' }}</span>
                </div>
              </div>
            </td>

            <!-- 被覆盖的节次，不渲染 -->
            <td v-else-if="isCoveredByMergedCourse(dayIndex, index+1)" style="display:none"></td>

            <!-- 空课 -->
            <td v-else class="empty-cell"></td>
          </template>

        </tr>
        </tbody>

      </table>
    </div>

    <div v-if="loading" class="loading">
      <i class="fas fa-spinner fa-spin"></i>
      <p>正在加载课程数据...</p>
    </div>

    <div v-if="!loading && courses.length === 0 && !errorMessage" class="no-data">
      <i class="fas fa-calendar-times"></i>
      <h3>暂无课程数据</h3>
      <p>当前学期第{{ selectedWeek }}周没有课程安排</p>
      <div class="action-buttons">
        <button class="action-btn primary-btn" @click="fetchCourses">
          <i class="fas fa-sync-alt"></i> 重新加载
        </button>
        <button class="action-btn secondary-btn" @click="changeWeek">
          <i class="fas fa-calendar-week"></i> 切换周次
        </button>
        <button class="action-btn secondary-btn" @click="debugMode = true">
          <i class="fas fa-bug"></i> 调试模式
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue';
//import { getCourseScheduleByStudentId } from "@/api/student/studentManger";
import { getClassroom } from '@/api/classroom/classroom';
import { selectByResourceIdAndResourceType,selectCourseSchedulingIinquiryListByTeacherId } from '@/api/course/availability';

export default {
  name: 'ScheduleDisplay',
  setup() {
    // 教师信息缓存 (key: 课程ID, value: 教师姓名)
    const teacherCache = new Map();
    const teacherPendingRequests = new Map();

    // 教室信息缓存
    const classroomCache = new Map();
    const classroomPendingRequests = new Map();

    // 课程颜色缓存
    const courseColorCache = new Map();

    // 预定义的颜色样式类名
    const colorClasses = [
      'course-color-1', 'course-color-2', 'course-color-3', 'course-color-4',
      'course-color-5', 'course-color-6', 'course-color-7', 'course-color-8',
      'course-color-9', 'course-color-10', 'course-color-11', 'course-color-12'
    ];

    // 根据课程名称获取颜色类名
    const getCourseColorClass = (course) => {
      if (!course || !course.courseName) return colorClasses[0];

      const courseName = course.courseName;
      if (courseColorCache.has(courseName)) {
        return courseColorCache.get(courseName);
      }

      // 生成稳定哈希值
      let hash = 0;
      for (let i = 0; i < courseName.length; i++) {
        const char = courseName.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash;
      }

      const colorIndex = Math.abs(hash) % colorClasses.length;
      const colorClass = colorClasses[colorIndex];
      courseColorCache.set(courseName, colorClass);

      return colorClass;
    };

    // 格式化教师ID显示（备用）
    const formatTeacherId = (teacherId) => {
      if (!teacherId) return '未知教师';
      if (teacherId.length > 12 && teacherId.includes('-')) {
        return `教师${teacherId.substring(0, 4)}...`;
      }
      return `教师${teacherId}`;
    };

    // 格式化教室ID显示
    const formatClassroomId = (classroomId) => {
      if (!classroomId) return '未知地点';
      if (classroomId.length > 12 && classroomId.includes('-')) {
        return `地点${classroomId.substring(0, 4)}...`;
      }
      return `地点${classroomId}`;
    };

    /**
     * 新增：通过课程ID查询教师姓名
     * 使用selectByResourceIdAndResourceType接口，resourceType=1表示教师
     */
    async function getTeacherNameByCourseId(courseId) {
      if (!courseId) return '未知教师';

      if (teacherCache.has(courseId)) {
        return teacherCache.get(courseId);
      }

      if (teacherPendingRequests.has(courseId)) {
        return teacherPendingRequests.get(courseId);
      }

      const request = selectByResourceIdAndResourceType(courseId)
          .then(response => {
            const result = response;
            console.log(`课程[${courseId}]查询教师信息结果：`, result);

            if (result.code === 200 && result.data && result.data.length > 0) {
              // 关键修复：直接使用字符串数组元素（接口返回的是["张丽娟", ...]）
              const teacherNames = result.data.map(name => {
                // 打印每个姓名，确认数据格式
                console.log(`教师姓名:`, name);
                return name || '未知教师'; // 直接使用字符串本身
              });

              console.log(`课程[${courseId}]获取到的教师名单:`, teacherNames);

              // 去重处理（保留原有逻辑）
              const uniqueNames = [...new Set(teacherNames)];

              if (uniqueNames.length === 0) {
                return '未知教师';
              }

              // 拼接姓名并缓存（保留原有逻辑）
              const teacherName = uniqueNames.join('，');
              teacherCache.set(courseId, teacherName);
              return teacherName;
            }
            throw new Error(result.msg || '未查询到教师信息');
          })
          .catch(error => {
            console.error(`获取课程[${courseId}]的教师信息失败:`, error);
            return '未知教师';
          })
          .finally(() => {
            teacherPendingRequests.delete(courseId);
          });

      teacherPendingRequests.set(courseId, request);
      return request;
    }

    // 获取教室信息
    async function getClassroomInfo(classroomId) {
      if (!classroomId) return { name: '未知地点', notes: '未知地点' };

      if (classroomCache.has(classroomId)) {
        return classroomCache.get(classroomId);
      }

      const request = getClassroom(classroomId)
          .then(response => {
            const result = response;
            if (result.code === 200 && result.data) {
              const classroomData = result.data;
              const classroomInfo = {
                name: classroomData.classRoomName ||
                    classroomData.roomCode ||
                    formatClassroomId(classroomId),
                notes: classroomData.classRoomName || '未知地点'
              };
              classroomCache.set(classroomId, classroomInfo);
              return classroomInfo;
            }
            throw new Error(result.msg || '获取教室信息失败');
          })
          .catch(error => {
            console.error('获取教室信息失败:', error);
            const fallbackInfo = {
              name: formatClassroomId(classroomId),
              notes: formatClassroomId(classroomId)
            };
            classroomCache.set(classroomId, fallbackInfo);
            return fallbackInfo;
          })
          .finally(() => {
            classroomPendingRequests.delete(classroomId);
          });

      classroomPendingRequests.set(classroomId, request);
      return request;
    }

    // 学期选项
    const semesterOptions = ref([
      { value: '2025-2026-spring', label: '2025-2026学年 秋季学期' },
    ]);

    // 周次选项
    const weekOptions = ref(Array.from({length: 20}, (_, i) => ({
      value: i + 1,
      label: `第${i + 1}周`
    })));

    // 获取当前周次
    const getCurrentWeek = () => {
      const today = new Date();
      const startOfYear = new Date(today.getFullYear(), 8, 1);
      const diffTime = today.getTime() - startOfYear.getTime();
      const diffWeeks = Math.ceil(diffTime / (1000 * 60 * 60 * 24 * 7));
      return Math.max(1, Math.min(20, diffWeeks));
    };

    // 用户信息
    const user = ref({
      name: '',
      studentId: '',
      userId: '',
      avatar: '',
      ip: '',
      browser: '',
      os: ''
    });

    // 星期几
    const days = ref(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']);

    // 时间段
    const timeSlots = ref([
      { start: "10:00", end: "10:45" },
      { start: "10:55", end: "11:40" },
      { start: "12:10", end: "12:55" },
      { start: "13:05", end: "13:50" },
      { start: "15:00", end: "15:45" },
      { start: "15:55", end: "16:40" },
      { start: "17:10", end: "17:55" },
      { start: "18:05", end: "18:50" },
      { start: "21:00", end: "21:45" },
      { start: "21:55", end: "22:40" }
    ]);

    // 选中的学期和周次
    const selectedSemester = ref(semesterOptions.value[0].value);
    const selectedWeek = ref(getCurrentWeek());

    // 课程数据
    const courses = ref([]);

    // API响应数据
    const apiResponse = ref(null);
    const rawApiData = ref(null);

    // 调试模式
    const debugMode = ref(false);

    // 加载状态
    const loading = ref(false);

    // 错误信息
    const errorMessage = ref('');

    // 当前学期文本
    const currentSemesterText = computed(() => {
      const found = semesterOptions.value.find(s => s.value === selectedSemester.value);
      return found ? found.label : '';
    });

    // 解析节次
    const parseLessonNumber = (lessonStr) => {
      if (!lessonStr) return 1;
      const match = lessonStr.match(/第(\d+)节/);
      return match ? parseInt(match[1]) : 1;
    };

    // 处理API返回的课程数据
    // 处理API返回的课程数据
    const processCourseData = (apiData) => {
      console.log('开始处理API数据:', apiData);

      if (!apiData || !Array.isArray(apiData)) {
        console.warn('API数据为空或不是数组');
        return [];
      }

      const processedCourses = [];

      apiData.forEach(courseItem => {
        // 检查 courseItem 和 courseScheduleDetails 是否存在
        if (!courseItem || !courseItem.courseScheduleDetails) {
          console.warn('课程项数据不完整，跳过', courseItem);
          return; // 使用 return 跳过当前迭代，而不是 continue
        }

        const details = courseItem.courseScheduleDetails;
        const scheduleList = courseItem.classScheduleDetailedList || [];

        // 关键修复：从details中获取课程班ID（API数据中为id字段）
        // 添加空值检查
        const courseClassId = details?.id;

        scheduleList.forEach(schedule => {
          // 检查 schedule 是否存在
          if (!schedule) {
            console.warn('课程安排数据为空，跳过');
            return;
          }

          const startWeek = details.startWeek || 1;
          const endWeek = details.endWeek || 20;

          if (selectedWeek.value >= startWeek && selectedWeek.value <= endWeek) {
            const startLesson = parseLessonNumber(schedule.startTime);
            const endLesson = parseLessonNumber(schedule.endTime);

            const course = {
              dayOfWeek: schedule.weekDay || 1,
              startLesson,
              endLesson,
              courseName: details.className || '未知课程',
              // 修复：使用正确的课程班ID
              courseId: courseClassId,
              teacherName: '加载中...',
              teacherNameLoading: true,
              classroomId: details.classroom,
              classroomName: formatClassroomId(details.classroom),
              classroomNameLoading: false,
              weekNumber: selectedWeek.value,
            };
            processedCourses.push(course);

            // 异步加载教师信息（传入正确的课程班ID）
            if (courseClassId) {
              getTeacherNameByCourseId(courseClassId)
                  .then(name => {
                    course.teacherName = name;
                    course.teacherNameLoading = false;
                    courses.value = [...courses.value];
                  })
                  .catch(() => {
                    course.teacherName = '未知教师';
                    course.teacherNameLoading = false;
                    courses.value = [...courses.value];
                  });
            }

            // 异步加载教室信息
            if (details.classroom) {
              course.classroomNameLoading = true;
              getClassroomInfo(details.classroom)
                  .then(classroomInfo => {
                    course.classroomName = classroomInfo.notes;
                    course.classroomNameLoading = false;
                    courses.value = [...courses.value];
                  })
                  .catch(error => {
                    console.error('获取教室信息失败:', error);
                    course.classroomName = formatClassroomId(details.classroom);
                    course.classroomNameLoading = false;
                    courses.value = [...courses.value];
                  });
            }
          }
        });
      });

      console.log('处理完成，共获得课程:', processedCourses.length, '门');
      return processedCourses;
    };

    // 获取某时间段起始的课程
    const getCourseAt = (day, time) => {
      return courses.value.find(course =>
          course.dayOfWeek === day && course.startLesson === time
      ) || null;
    };

    // 判断当前节次是否被某个跨多节的课程覆盖
    const isCoveredByMergedCourse = (day, time) => {
      return courses.value.some(course =>
          course.dayOfWeek === day &&
          time > course.startLesson &&
          time <= course.endLesson
      );
    };

    // 显示课程详情
    const showCourseDetail = (course) => {
      if (!course || course.courseName === '无课程') return;

      let detail = `课程名称: ${course.courseName}\n授课教师: ${course.teacherName}\n上课地点: ${course.classroomName}\n时间: ${days.value[course.dayOfWeek - 1]} 第${course.startLesson}-${course.endLesson}节`;

      if (course.weekNumber) {
        detail += `\n周次: 第${course.weekNumber}周`;
      }

      alert(detail);
    };

    // 获取用户信息
    const fetchUserInfo = async () => {
      try {
        user.value = {
          name: '',
          studentId: '',
          userId: '',
          avatar: '',
          ip: '',
          browser: '',
          os: ' '
        };
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    };

    // 获取课程数据
    const fetchCourses = async () => {
      loading.value = true;
      errorMessage.value = '';
      apiResponse.value = null;
      rawApiData.value = null;

      try {
        console.log('开始请求课程表数据...');
        const response = await selectCourseSchedulingIinquiryListByTeacherId();

        console.log('API响应:', response);
        apiResponse.value = response;

        if (response && response.code === 200) {
          rawApiData.value = response.data;
          courses.value = processCourseData(response.data);
          console.log('最终课程数据:', courses.value);
        } else {
          const errorMsg = response ? (response.msg || response.message || '获取课程表数据失败') : '请求失败';
          errorMessage.value = errorMsg;
          console.error('API返回错误:', errorMsg);
        }
      } catch (error) {
        const errorMsg = `请求课程表数据出错: ${error.message || error}`;
        errorMessage.value = errorMsg;
        console.error('API请求异常:', error);
      } finally {
        loading.value = false;
      }
    };

    // 切换周次
    const changeWeek = () => {
      selectedWeek.value = selectedWeek.value < 20 ? selectedWeek.value + 1 : 1;
    };

    // 监听周次变化，重新过滤课程
    watch(selectedWeek, () => {
      if (rawApiData.value) {
        courses.value = processCourseData(rawApiData.value);
      }
    });

    // 监听学期变化，重新获取数据
    watch(selectedSemester, () => {
      fetchCourses();
    });

    // 组件挂载时初始化
    onMounted(() => {
      fetchUserInfo();
      fetchCourses();
    });

    return {
      semesterOptions,
      weekOptions,
      user,
      days,
      timeSlots,
      selectedSemester,
      selectedWeek,
      courses,
      loading,
      errorMessage,
      currentSemesterText,
      showCourseDetail,
      fetchCourses,
      changeWeek,
      debugMode,
      apiResponse,
      rawApiData,
      getCourseAt,
      isCoveredByMergedCourse,
      getCourseColorClass
    };
  }
}
</script>

<style scoped>
/* 样式保持不变 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

header {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h1 {
  font-size: 28px;
  display: flex;
  align-items: center;
}

.logo h1 i {
  margin-right: 10px;
  font-size: 32px;
}

.control-panel {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selector label {
  font-weight: 600;
  color: #555;
}

select {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

select:hover {
  border-color: #4b6cb7;
  box-shadow: 0 0 0 2px rgba(75, 108, 183, 0.2);
}

.current-info {
  margin-left: auto;
  background: #eef4ff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  color: #4b6cb7;
}

.timetable {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

th, td {
  padding: 0;
  text-align: center;
  border: 1px solid #eaeaea;
  position: relative;
}

th {
  background-color: #4b6cb7;
  font-weight: 600;
  color: white;
  padding: 15px;
  height: 50px;
}

.time-column {
  background-color: #f1f5f9;
  font-weight: 600;
  color: #4b6cb7;
  width: 100px;
  font-size: 12px;
  padding: 15px;
  height: 80px;
}

.course-cell {
  padding: 0 !important;
  height: 80px;
  vertical-align: top;
}

.course-card {
  position: absolute;
  top: 10%;
  left: 5%;
  right: 5%;
  bottom: 10%;
  border-radius: 10px;
  padding: 8px;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 课程颜色样式 */
.course-color-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.course-color-1:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); }

.course-color-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.course-color-2:hover { background: linear-gradient(135deg, #ee7de9 0%, #f3455a 100%); }

.course-color-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.course-color-3:hover { background: linear-gradient(135deg, #3d9aec 0%, #00e0ec 100%); }

.course-color-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.course-color-4:hover { background: linear-gradient(135deg, #31d769 0%, #26e7c5 100%); }

.course-color-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.course-color-5:hover { background: linear-gradient(135deg, #f95e88 0%, #fedf2e 100%); }

.course-color-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.course-color-6:hover { background: linear-gradient(135deg, #96ebd8 0%, #fed1d1 100%); }

.course-color-7 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
.course-color-7:hover { background: linear-gradient(135deg, #ff888c 0%, #fec5dd 100%); }

.course-color-8 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
.course-color-8:hover { background: linear-gradient(135deg, #ffe6c0 0%, #fba48d 100%); }

.course-color-9 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.course-color-9:hover { background: linear-gradient(135deg, #967abf 0%, #fab0d9 100%); }

.course-color-10 { background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%); }
.course-color-10:hover { background: linear-gradient(135deg, #f9c4b2 0%, #ffbfed 100%); }

.course-color-11 { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }
.course-color-11:hover { background: linear-gradient(135deg, #72f89e 0%, #7dc9e2 100%); }

.course-color-12 { background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%); color: #4a5568; }
.course-color-12:hover { background: linear-gradient(135deg, #bdc7cd 0%, #d0d9de 100%); }

.course-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.2;
}

.course-details {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.2;
  margin-bottom: 2px;
}

.empty-cell {
  background-color: #f9fafb;
  position: relative;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.loading i {
  font-size: 40px;
  margin-bottom: 15px;
  color: #4b6cb7;
}

.error-message {
  background: #fff3f3;
  border: 1px solid #ffcdd2;
  color: #d32f2f;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reload-btn {
  margin-left: auto;
  padding: 8px 15px;
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.reload-btn:hover {
  background: #b71c1c;
}

.debug-info {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.debug-close-btn {
  background: #0369a1;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.no-data {
  text-align: center;
  padding: 40px;
  color: #666;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #ccc;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  font-size: 14px;
}

.primary-btn {
  background: #4b6cb7;
  color: white;
}

.secondary-btn {
  background: #e2e8f0;
  color: #4a5568;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .control-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .current-info {
    margin-left: 0;
    text-align: center;
  }
}
</style>
